 /*
 * @description: 倒计时组件
 * @Author: along
 * @Date: 2020-12-30
 * @Last Modified by: along
 * @Last Modified time: 2020-12-30
 */
<template>
    <div
        class="countDown"
        @click="emitEvent(6)"
    >
        <template v-if="TYPE !== '' && baseconfig.data.start_time && baseconfig.data.end_time">
            <div v-if="TYPE == 2 || TYPE == 1">
                <div
                    class="__down"
                    :style="{padding: `${baseconfig.style.marginV}px 0`, paddingLeft: `${baseconfig.style.marginH}px`, background: baseconfig.style.background_type === 1 ? `url(${baseconfig.style.backgroundImage}) no-repeat center center` : baseconfig.style.backgroundColor, backgroundSize: 'cover'}"
                >
                    <p
                        class="__down_title"
                        :style="{color: baseconfig.style.text_color, fontSize: baseconfig.style.time_style === 0 ? '12px' : (baseconfig.style.time_style === 1 ? '14px' : '13px')}"
                    >{{ TYPE == 1 ? '距活动结束' : (TYPE == 2 ? '距活动开始' : '活动已结束') }}</p>
                    <p
                        class="__down_item"
                        v-if="baseconfig.style.type === 1"
                        :style="{backgroundColor: baseconfig.style.time_style === 2 ? 'rgba(255,255,255,1)' : baseconfig.style.text_color, color: baseconfig.style.number_color, fontSize: baseconfig.style.time_style === 0 ? '12px' : (baseconfig.style.time_style === 1 ? '14px' : '13px')}"
                        :class="baseconfig.style.time_style === 0 ? 'time_style_one' : (baseconfig.style.time_style === 1 ? 'time_style_to' : 'time_style_three')"
                    >{{ formData.day }}</p>
                    <p
                        class="__down_text"
                        v-if="baseconfig.style.type === 1"
                        :style="{color: baseconfig.style.text_color, fontSize: baseconfig.style.time_style === 0 ? '12px' : (baseconfig.style.time_style === 1 ? '14px' : '13px')}"
                    >天</p>
                    <p
                        class="__down_item"
                        :style="{backgroundColor: baseconfig.style.time_style === 2 ? 'rgba(255,255,255,1)' : baseconfig.style.text_color, color: baseconfig.style.number_color, fontSize: baseconfig.style.time_style === 0 ? '12px' : (baseconfig.style.time_style === 1 ? '14px' : '13px'), width: baseconfig.style.type == 0 ? 'auto' : '', padding: baseconfig.style.type == 0 ? '0 3px' : ''}"
                        :class="baseconfig.style.time_style === 0 ? 'time_style_one' : (baseconfig.style.time_style === 1 ? 'time_style_to' : 'time_style_three')"
                    >{{ formData.hour }}</p>
                    <p
                        class="__down_text"
                        :style="{color: baseconfig.style.text_color, fontSize: baseconfig.style.time_style === 0 ? '12px' : (baseconfig.style.time_style === 1 ? '14px' : '13px')}"
                    >{{ baseconfig.style.time_style === 2 ? '时' : ':' }}</p>
                    <p
                        class="__down_item"
                        :style="{backgroundColor: baseconfig.style.time_style === 2 ? 'rgba(255,255,255,1)' : baseconfig.style.text_color, color: baseconfig.style.number_color, fontSize: baseconfig.style.time_style === 0 ? '12px' : (baseconfig.style.time_style === 1 ? '14px' : '13px')}"
                        :class="baseconfig.style.time_style === 0 ? 'time_style_one' : (baseconfig.style.time_style === 1 ? 'time_style_to' : 'time_style_three')"
                    >{{ formData.minutes }}</p>
                    <p
                        class="__down_text"
                        :style="{color: baseconfig.style.text_color, fontSize: baseconfig.style.time_style === 0 ? '12px' : (baseconfig.style.time_style === 1 ? '14px' : '13px')}"
                    >{{ baseconfig.style.time_style === 2 ? '分' : ':' }}</p>
                    <p
                        class="__down_item"
                        :style="{backgroundColor: baseconfig.style.time_style === 2 ? 'rgba(255,255,255,1)' : baseconfig.style.text_color, color: baseconfig.style.number_color, fontSize: baseconfig.style.time_style === 0 ? '12px' : (baseconfig.style.time_style === 1 ? '14px' : '13px')}"
                        :class="baseconfig.style.time_style === 0 ? 'time_style_one' : (baseconfig.style.time_style === 1 ? 'time_style_to' : 'time_style_three')"
                    >{{ formData.seconds }}</p>
                    <p
                        class="__down_text"
                        v-if="baseconfig.style.time_style === 2"
                        :style="{color: baseconfig.style.text_color, fontSize: baseconfig.style.time_style === 0 ? '12px' : (baseconfig.style.time_style === 1 ? '14px' : '13px')}"
                    >{{ baseconfig.style.time_style === 2 ? '秒' : ':' }}</p>
                </div>
            </div>
            <div
                v-if="TYPE === 0"
                class="__down"
                :style="{padding: `${baseconfig.style.marginV}px ${baseconfig.style.marginH}px`, color: baseconfig.style.text_color}"
            >
                活动已结束
            </div>
        </template>
        <div
            :style="{height: '30px'}"
            v-else/>
    </div>
</template>

<script>
export default {
    name: 'CountDown',
    props: {
        baseconfig: {
            type: Object,
            default: () => {}
        },
        index: {//存在多个相同组件,查询当前位置
            type: Number,
            default: () => {}
        }
    },
    data () {
        return {
            start_time: '',
            end_time: '',
            TYPE: '',//0:已结束 1:进行中 2:未开始
            formData: {
                day: '02',
                hour: '11',
                minutes: '22',
                seconds: '33'
            },
            count_timeout: null
        };
    },
    watch: {
        baseconfig: {
            handler: function (val, oldVal) {
                this.init(val);
            },
            deep: true
        }
    },
    filters: {

    },
    mounted () {
        this.init(this.baseconfig);
    },
    methods: {
        init (val) {
            const now_time = new Date().getTime();

            if(val.data.start_time) {
                this.start_time = val.data.start_time;
            }
            if(val.data.end_time) {
                this.end_time = val.data.end_time;
            }

            this.TYPE = Number(this.end_time) < Number(now_time) ? 0 : (Number(this.start_time) > Number(now_time) ? 2 : 1);

            // console.log('-----', this.start_time, this.end_time, this.now_time, this.TYPE == 0 ? '已结束' : (this.TYPE == 2 ? '未开始' : '进行中'));

            //初始化倒计时组件
            if(this.start_time && this.end_time) {
                clearTimeout(this.count_timeout);
                this.countDown(this.start_time, this.end_time, new Date().getTime(), this.TYPE);
            }
        },

        /**
         * @deprecated 处理倒计时
         * @param {Number}  start_time  //开始时间
         * @param {Number}  end_time    //结束时间
         * @param {Number}  now_time    //当前时间
         * @param {Number}  type        //类型 0:已结束 1:进行中 2:未开始
         *  desc: 只要不是已结束 一直递归下去更新时间
         */
        countDown (start_time, end_time, now_time, type) {
            if(type === 0) {
                this.TYPE = 0;
                clearTimeout(this.count_timeout);
                return false;
            }
            const now_date = new Date().getTime();
            const now_type = Number(end_time) < Number(now_date) ? 0 : (Number(start_time) > Number(now_date) ? 2 : 1);
            const wait_time = now_type == 1 ? (end_time - now_date) : (start_time - now_date);
            const days = parseInt(wait_time / (1000 * 60 * 60 * 24));
            const hours = parseInt((wait_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = parseInt((wait_time % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = ((wait_time % (1000 * 60)) / 1000).toFixed(0);
            const repair = data => {
                if(data < 10) return '0' + data;
                return data;
            };

            this.TYPE = now_type;
            if(this.baseconfig.style.type === 0) {
                this.formData = {
                    day: repair(days),
                    hour: repair(Number(days) * 24 + Number(hours)),
                    minutes: repair(minutes),
                    seconds: repair(seconds)
                };
            } else if (this.baseconfig.style.type === 1) {
                this.formData = {
                    day: repair(days),
                    hour: repair(hours),
                    minutes: repair(minutes),
                    seconds: repair(seconds)
                };
            }
            this.count_timeout = setTimeout(() => {
                this.countDown(start_time, end_time, new Date().getTime(), now_type);
            }, 1000);
        },

        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,//组件类型
                index: this.index//组件位置
            });
        }
    }
};
</script>

<style lang="less" scoped>
.countDown {
    width: 375px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px dashed #ffffff;
    overflow: hidden;
    &:hover {
        border: 1px dashed #1890FF;
    }
    .__down {
        width: 375px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .__down_item {
            width: 21px;
            height: 20px;
            background: rgba(51, 51, 51, 1);
            text-align: center;
            line-height: 20px;
            color: #ffffff;
            font-size: 12px;
            font-weight: 500;
            border-radius: 2px;
        }
        .__down_text {
            font-size: 12px;
            color: rgba(51, 51, 51, 1);
            margin: 0 4px;
            font-weight: 500;
        }
        .__down_title {
            color: rgba(51, 51, 51, 1);
            font-size: 12px;
            margin-right: 10px;
            font-weight: 500;
            white-space: nowrap;
        }
        .time_style_one {
            width: 21px;
            height: 20px;
            line-height: 20px;
        }
        .time_style_to {
            width: 25px;
            height: 22px;
            line-height: 22px;
        }
        .time_style_three {
            width: 25px;
            height: 22px;
            line-height: 22px;
            // color: rgba(230, 27, 27, 1) !important;
            font-size: 20px !important;
            background-color: transparent !important;
        }
    }
}
</style>